Professional Documents
Culture Documents
com 2008
a.2 Buatlah folder images didalam direktori latihCSS yang baru saja anda buat,
sehingga strukturnya tampak sebagai berikut:
Gradient Tool
Foreground
&
Backgroun
d b.3 Kemudian buatlah pola warna gradient Orange-Yellow dengan membuat
menarik garis lurus dari ujung atas ke bawah (top-bottom). Simpan
gambar tersebut di dalam folder images dengan nama m_over.jpeg
Layout Website Using CSS by masmalik@ymail.com 2008
b.4 Buat kembali seperti langkah b.3 akan tetapi polanya adalah gradient
Yellow-Orange dari bawah ke atas (bottom-top). Kemudian simpan
dengan nama m_down.jpg. Dengan demikian anda telah memiliki 2 file
JPG di dalam folder images.
c.2 Ketik kode berikut ini dan simpan di direktori utama latihCSS dengan nama
file style.css
/* CSS Document */
body{
background-color:#000000
font-family:Arial, Helvetica, sans-serif;
}
#wrapper{
width: 900px;
margin: 0 auto;
background-color:#666666
}
#header{
width:900px;
background-image:(images/your_image_here.jpg);
background-repeat:no-repeat;
background-position:top;
background-color:#333333
}
Layout Website Using CSS by masmalik@ymail.com 2008
#header p{
color:#ffffff;
font-size:14px;
margin:0;
padding:82px 6px 0px 6px;
}
#menu{
height:25px;
font-size:11px;
font-weight:bold;
color:#FFFFFF;
background-image:url(images/mover.jpg);
background-repeat:repeat-x;
}
#menu ul{
margin:0;
padding:0;
list-style-type:none;
}
#menu ul li{
display:inline;
}
#menu ul li a{
float:left;
padding:5px 0;
width:65px;
text-align:center;
}
#menu a:link, #menu a:visited{
color::#ffffff;
background-image:url(images/mover.jpg);
background-repeat:repeat-x;
background-position:center;
}
#menu a:hover, #menu a:active{
color:#000000;
background-image:url(images/mdown.jpg);
background-repeat:repeat-x;
background-position:center;
}
#content{
background-color:#cccccc;
width:900px;
}
#content h1{
font-size:18px;
font-weight:normal;
margin: 0 6px;
padding: 15px 0 3px 0;
}
#content p{
color:#000000;
font-size:12px;
margin:0 6px;
padding:0 6px 9px 6px;
}
#information{
margin:15px 6px;
width:200px;
float:right;
background-color:#ff0000;
border::1px solid #000;
}
Layout Website Using CSS by masmalik@ymail.com 2008
#information p{
font-size:11px;
color:#ffffff;
margin: 0;
padding: 6px;
}
#footer{
clear:both;
background-color:#ffff00;
}
#footer p{
font-size:15px;
font-weight:bold;
color:#000000;
}
c.3 Buat file baru dengan tipe HTML. Ketik kode di bawah ini dan simpan di
direktori utama latihCSS dengan nama file index.html.
To Be Continued… ^_^